<template>
	<view style="width: 100%;min-height: 100vh;overflow: hidden;" class="Afont"
		:style="{background:'url('+Imgbase+'/brave_goodpoor_bgc.png)','background-size':'100%',}">

		<view class="zinde">
			<view class="" style="padding: 105rpx 20rpx 0;position: relative;z-index: 99;" @click="back">
				<image class="w-80 h-80 margin-top-10" :src="Imgbase + '/brave_goodindex_img1.png'" mode="aspectFit">
				</image>
			</view>
		</view>

		<view class="w-700 margin-auto h-460 margin-top-30"
			:style="{background:'url('+Imgbase+'/brave_goodadvan_img1.png)','background-size':'100% 100%',}">
			<view class="df padding-top-30 padding-left-30">
				<view class="img w-175 h-175">
					<image class="w100 h100 radius-15" style="border: 4rpx solid #764620;"
						:src="item_ad.goodmes.adimage" mode="aspectFit"></image>
				</view>
				<view class="padding-left-15 padding-top-30" style="color: #764620;">
					<view class="two-line">
						{{item_ad.goodmes.name}}
					</view>
					<!-- <view class="" v-if="item_ad.score > 0">
						附赠积分：{{item_ad.score}}
					</view> -->
					<view class="padding-top-15" >
						<u-parse :content="item_ad.goodmes.content"></u-parse>
					</view>
					<view class="h-50">

					</view>
				</view>
			</view>

			<view class="padding-right-30" style="text-align: right;">
				<image @click="open" class="w-145 h-60" :src="Imgbase + '/brave_goodadvan_img2.png'" mode="aspectFit">
				</image>
			</view>

			<view class="flex-between padding-top-90 padding-left-30 padding-right-30 padding-bottom-10">
				<view class="">
					<image class="w-75 h-30 " :src="Imgbase + '/brave_goodadvan_img3.png'" mode="aspectFit"></image>
				</view>
				<view class="padding-right-30" style="color: #764620;">
					{{Math.floor(bprice/item_ad.goodmes.price*100*100) / 100}}%
				</view>
			</view>

			<view class="padding-left-30 padding-right-30 w100" style="position: relative;">
				<view class="rate">
					<view class="rate_two " :style="[{width:bprice/item_ad.goodmes.price*100 + '%'}]">

					</view>
				</view>
			</view>
		</view>

		<view class="box_item padding-top-30 ">
			<view class="w-167 h-240 radius-10 padding-10 margin-bottom-20 item" style="float: left;position: relative;"
				v-for="(item,index) in baglist" :key="index"
				:style="{background:'url('+Imgbase+'/brave_goodback_img7.png)','background-size':'100% 100%',}">
				<image class="w100 h-150"  @click="is_check(index)"
					:src="item.adimage" mode="aspectFill">
				</image>

				<view class="w100 one-line font-20 padding-left-10 padding-right-10">
					{{item.name}}
				</view>

				<view class="w100 flex-between padding-left-10 padding-right-10">
					<view class=" w-40 h-25 text-center" @click="numjian(index)">
						<image class="w100 h100" :src="Imgbase + '/brave_goodadvan_img4.png'" mode="aspectFit"></image>
					</view>
					<view class="font-22 font-weight-500 padding-top-4" style="width: 60%;color: #000;">
						<input class="text-center w100" type="number" v-model="item.checked_num"
							@input="inputnum(index)" />
					</view>
					<view class=" h-25 w-40 text-center" @click="numjia(index)">
						<image class="w100 h100" :src="Imgbase + '/brave_goodadvan_img5.png'" mode="aspectFit"></image>
					</view>
				</view>
				<!-- <view class="font-weight-500 " v-if="item.checked == false" @click="is_check(index)"
					style="position: absolute;bottom: 10rpx;right: 10rpx;">
					x{{item.num}}
				</view> -->
				<view @click="is_check(index)" class="w-35 h-35 radiusb-50"
					style="position: absolute;top: 4rpx;left: 4rpx;background-color: #fff;"
					:style="{'border':item.checked?'none':'2rpx solid #e3e3e3'}">
					<image style="transition: .3s;" :style="{'opacity':item.checked?'1':'0'}" class="w100 h100"
						:src="Imgbase + '/brave_goodback_img8.png'" mode="aspectFit"></image>
				</view>
			</view>
		</view>




		<view class="btn h-100 w100 flex-between padding-left-25 padding-right-25">
			<!-- 进阶 -->
			<image @click="jibtn()" class="w-350 h-100" :src="Imgbase + '/brave_goodadvan_img6.png'" mode="aspectFit">
			</image>
			<!-- 全选 -->
			<image @click="allchoose()" class="w-350 h-100" :src="Imgbase + '/brave_goodadvan_img7.png'" mode="aspectFit">
			</image>

		</view>

		<u-popup :show="listshow" mode="center" :round="10" @close="close" @open="open" bgColor="#AEE1DC">
			<view class="padding-20 w-700">
				<view class="list_top padding-top-15">
					<scroll-view scroll-x class="nav w100" scroll-with-animation :scroll-left="scrollLeft"
						style="height: 75upx;overflow: hidden;">
						<view class="top_item w-150 h-50 radius-10 text-center" @tap="tabSelect"
							:class="index==seleon?'open':'no_open'" v-for="(item,index) in classifylist.names"
							:key="index" :data-id="index" @click="selename(index)">
							{{item}}
						</view>
					</scroll-view>
				</view>
				<view class="list_bot radius-15">
					<scroll-view scroll-y class="w100" scroll-with-animation style="height: 800rpx;overflow: hidden;">
						<u-empty v-if="exchangeslist.length == 0" mode="car" text="暂无内容"
							icon="http://cdn.uviewui.com/uview/empty/car.png">
						</u-empty>
						<view class="bot_item padding-10 radius-15 font-22" v-for="(item,index) in exchangeslist"
							:key="index" :data-id="index" @click="seleitem(index)">
							<view class="w100">
								<image class="w100 h-190 " :src="item.goodmes.adimage" mode="aspectFit"></image>
							</view>
							<view class="w100 h-60  two-line margin-top-5">
								{{item.goodmes.name}}
							</view>
							<view class="" style="color: red;">
								￥{{item.goodmes.price}}
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="showbtn fff flex-center w-400 h-80 radius-15 font-30 font-weight-500" @click="fanhui">
					返回
				</view>
			</view>
		</u-popup>

		<u-modal :show="modelshow" title="提示" :content='content' showCancelButton confirmColor="#FEC241"
			@cancel="modeloff" @confirm="quebtn"></u-modal>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				classifyid: 0,
				item_ad: {},
				page: 1,
				baglist: [],
				listshow: false,
				classifylist: [],
				scrollLeft: 0,
				seleon: 0,
				exchangeslist: [],
				bprice: 0,
				jindu: 0,
				duihuanjindu: 0,
				shopindex: 0,
				content: '',
				modelshow: false,
				numindex: -1,
				progress: 0,
				checktype: true
			}
		},
		onShow() {
			this.classify(0)
			this.userBag()
		},
		onReachBottom() {
			let _this = this
			// _this.page++;
			// _this.userBag();
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			// 全选
			allchoose() {
				// this.item_ad.goodmes.price = Number(this.item_ad.goodmes.price) + 8500
				var _this = this,
					allprice = 0,
					price = 0
				if (this.checktype) {
					this.baglist.forEach(function(it) {
						allprice += it.back_price * it.num
					})
					if (allprice <= _this.item_ad.goodmes.price) {
						_this.baglist.forEach(function(it) {
							it.checked = true
						})
					} else {
						var Aprice = allprice / _this.item_ad.goodmes.price,
							Bprice = Aprice.toString()
						if (Bprice.split('.').length == 0) {

							_this.baglist.forEach(function(it) {
								it.checked = true
							})
						} else {

							var arr = [],
								charr = [],
								Cprice = '0.' + Bprice.split('.')[1],
								chajia = Number(Cprice).toFixed(2) * _this.item_ad.goodmes.price * 0.95
							_this.baglist.forEach(function(it) {
								arr.push(it)
								it.checked = true
							})

							arr.sort((a, b) => b.back_price - a.back_price);
							arr.forEach(function(it) {
								it.quannum = 0
								if (Number(it.back_price) <= chajia) {

									// console.log(it)

									if (it.num == 1) {
										chajia = chajia - it.back_price
										charr.push(it)
									} else {


										let nowjia = 0
										// console.log(chajia)
										for (let i = 0; i < it.num; i++) {
											if (chajia > Number(it.back_price)) {
												nowjia++
												chajia = chajia - Number(it.back_price)
												// it.quannum = nowjia
												charr.push(it)
											}
										}
									}
								}
							})
							_this.baglist.forEach(function(it) {
								charr.forEach(function(item) {
									if (it.goods_id == item.goods_id) {
										if (item.quannum == 0) {
											item.checked = false
										} else {
											item.checked = true
											it.checked_num = it.quannum
										}
									}
								})
								// console.log(it)
							})
							let allpsrice = 0
							charr.forEach(function(it) {
								if (it.checked == false) {
									allpsrice += it.back_price * it.num
								}
							})
							// console.log(allpsrice)





							// console.log(Number(Cprice) + 1)
						}
					}

					//	如果点击全选进度条小于100%
					let noarr = [],
						yesarr = [],
						nowprice = 0
					_this.baglist.forEach(function(it) {
						let bagp = Number(it.checked_num) * Number(it.back_price)
						if (it.checked) {
							// console.log()
							nowprice += bagp
						}

					})

					if (nowprice < _this.item_ad.goodmes.price) {
						// console.log(nowprice)
						_this.baglist.forEach(function(it) {
							if (it.checked == false) {
								noarr.push(it)
							}
						})

						noarr.sort((a, b) => a.back_price - b.back_price);

						noarr.forEach(function(it) {
							for (let i = 0; i < it.num; i++) {
								if (nowprice < _this.item_ad.goodmes.price) {
									nowprice += Number(it.back_price)
									yesarr.push(it)
								} else {
									return
								}
								// console.log(it);
							}
						})

						let disarr = []
						for (let e = 0; e < yesarr.length; e++) {
							yesarr[e].quenum = 1
							if (e > 0) {
								if (yesarr[e - 1].goods_id == yesarr[e].goods_id) {
									console.log(disarr[e - 1])
									disarr[e - 1].quenum++
								} else {
									disarr.push(yesarr[e])
								}
							} else {
								disarr.push(yesarr[e])
							}
						}


						console.log(disarr)
						_this.baglist.forEach(function(it) {
							disarr.forEach(function(item) {
								if (it.goods_id == item.goods_id) {
									it.checked_num = item.quenum
									it.checked = true
									// it.checked_num++
									// console.log('123', it.goods_id)
								}
							})
							if (it.checked) {
								// console.log(it.checked_num)
							}
						})
						// console.log(yesarr)
					}


				} else {
					this.baglist.forEach(function(it) {
						it.checked = false
					})
				}
				this.checktype = !this.checktype

				// 转化进度条
				// this.baglist[e].checked = !this.baglist[e].checked


				// 转化进度条
				this.baglist.forEach(function(it) {
					if (it.checked == false) {
						it.checked_num = it.num
					}
					let bagp = Number(it.checked_num) * Number(it.back_price)
					let money = 0
					if (it.checked) {
						// console.log()
						price += bagp
						_this.jindu = ((parseInt(_this.item_ad.jindu) + price) / _this.item_ad.goodmes
							.price * 100).toFixed(2)
					}

				})
				if (price == 0) {
					_this.jindu = (parseInt(_this.item_ad.jindu) / _this.item_ad.goodmes
						.price * 100).toFixed(2)
				}
				_this.bprice = price

				let Nprice = Bprice.split('.')[0],
					Mprice = (_this.jindu / 100).toString(),
					Mprices = Mprice.split('.')[0],
					lastarr = []

				if (Number(Nprice) > Mprices) {
					_this.bprice = 0
					price = 0
					let lastchajia = (Number(Bprice) - _this.jindu / 100),
						lasts = (lastchajia * _this.item_ad.goodmes.price).toFixed(1) * 0.95


					_this.baglist.forEach(function(it) {
						if (it.checked == false) {
							lastarr.push(it)
						}
					})

					let ssarr = []

					lastarr.sort((a, b) => a.back_price - b.back_price);
					lastarr.forEach(function(it, idx) {
						for (let i = 0; i < it.num; i++) {
							if (lasts > Number(it.back_price)) {
								console.log(123123)
								if (it.checked_num > 1) {
									it.checked_num--
								} else {
									ssarr.push(it)
									// lastarr.splice(idx, 1)
								}
								lasts = lasts - Number(it.back_price)
							}
						}
					})

					_this.baglist.forEach(function(it) {
						ssarr.forEach(function(item) {
							if (it.goods_id == item.goods_id) {
								it.checked_num = item.checked_num
								it.checked = true
								// it.checked_num++
								// console.log('123', it.goods_id)
							}
						})
						if (it.checked) {
							// console.log(it.checked_num)
						}
					})

					// 转化进度条
					this.baglist.forEach(function(it) {
						if (it.checked == false) {
							it.checked_num = it.num
						}
						let bagp = Number(it.checked_num) * Number(it.back_price)
						let money = 0
						if (it.checked) {
							// console.log()
							price += bagp
							_this.jindu = ((parseInt(_this.item_ad.jindu) + price) / _this.item_ad.goodmes
								.price * 100).toFixed(2)
						}

					})
					if (price == 0) {
						_this.jindu = (parseInt(_this.item_ad.jindu) / _this.item_ad.goodmes
							.price * 100).toFixed(2)
					}
					_this.bprice = price
				}
			},
			goback() {
				uni.navigateBack()
			},
			fanhui() {
				this.listshow = false
			},
			modeloff() {
				this.modelshow = false
			},
			// 立即兑换 --- 经验转商品
			async exchangeGoods(e) {
				console.log(e)
				let item = await this.$api.post('Exchange/exchangeGoods', {
					token: uni.getStorageSync('token'),
					id: this.item_ad.id,
					num: 1,
					name: '韦新林',
					phone: 15555555555
				})

				if (item.code == 1) {
					uni.showToast({
						icon: 'none',
						title: item.msg
					});
					this.userBag()
					this.exchangelist(1, this.shopindex)
				}
			},
			quebtn() {
				this.modelshow = false
				var arr = []
				this.baglist.forEach(function(it) {
					if (it.checked) {
						arr.push({
							"goods_id": it.goods_id,
							"num": it.checked_num
						})
					}
				})
				this.exchangePrice(JSON.stringify(arr))
			},
			// 进阶按钮
			jibtn() {
				let _this = this
				// let num = parseInt(this.bprice / this.item_ad.goodmes.price * 100).toFixed(2)
				let num = Math.floor(this.bprice / this.item_ad.goodmes.price * 100 * 100) / 100
				console.log(num)
				if (num >= 100) {
					_this.content = '当前进度为' + num + '%,可进阶' + Math.floor(num / 100) + '件,如有多余进度将作废,确认继续进阶吗？'
					_this.modelshow = true
				} else {
					uni.showToast({
						icon: 'none',
						title: '进度条未达到100%'
					});
				}
			},
			// 即刻进阶 --- 商品转经验
			async exchangePrice(e) {
				let item = await this.$api.post('Exchange/exchangePrice', {
					token: uni.getStorageSync('token'),
					exchange_id: this.item_ad.id,
					ids: e
				})

				if (item.code == 1) {
					uni.showToast({
						icon: 'none',
						title: item.msg
					});
					this.userBag()
					this.exchangelist(1, this.shopindex)
					this.bprice = 0
				}
			},
			// 点击商品
			seleitem(i) {
				let _this = this
				this.exchangelist(1, i)
				this.listshow = false
				this.checktype = true
				this.shopindex = i
				this.baglist.forEach(function(it) {
					it.checked = false
				})

				var price = 0

				this.baglist.forEach(function(it) {

					if (it.checked == false) {
						it.checked_num = it.num
					}
					let bagp = Number(it.checked_num) * Number(it.back_price)
					let money = 0
					if (it.checked) {
						// console.log()
						price += bagp
						_this.jindu = ((parseInt(_this.item_ad.jindu) + price) / _this.item_ad.goodmes
							.price * 100).toFixed(2)
					}

				})
				if (price == 0) {
					_this.jindu = (parseInt(_this.item_ad.jindu) / _this.item_ad.goodmes
						.price * 100).toFixed(2)
				}
				_this.bprice = price
			},
			// 点击分类
			selename(i) {
				this.seleon = i
				console.log(this.classifylist.ids[i])
				this.classifyid = this.classifylist.ids[i]
				this.exchangelist(-1)
			},
			tabSelect(e) {
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 50;
				// this.page = 1;
			},
			open() {
				this.listshow = true
			},
			close() {
				this.listshow = false
			},
			// 减
			numjian(e) {
				let _this = this
				if (this.baglist[e].checked_num > 0) {
					this.baglist[e].checked_num--

					var price = 0
					this.baglist.forEach(function(it) {
						// it.checked_num = it.num
						let bagp = Number(it.checked_num) * Number(it.back_price)
						let money = 0
						if (it.checked) {
							console.log(it)
							price += bagp
							_this.jindu = ((parseInt(_this.item_ad.jindu) + price) / _this.item_ad.goodmes
								.price * 100).toFixed(2)
						}

					})
					if (price == 0) {
						_this.jindu = (parseInt(_this.item_ad.jindu) / _this.item_ad.goodmes
							.price * 100).toFixed(2)
					}
					_this.bprice = price
				}

				if (this.baglist[e].checked_num == 0) {
					this.baglist[e].checked = false
				}
			},
			// inputindex(e) {

			// },
			inputnum(e) {
				let _this = this
				// this.numindex = e
				// console.log(this.baglist[e].checked_num)
				// console.log(this.baglist[e].num)
				if (this.baglist[e].checked_num > this.baglist[e].num) {
					_this.$nextTick(() => {
						_this.baglist[e].checked_num = this.baglist[e].num
					})
				}
				setTimeout(() => {
					var price = 0
					_this.baglist.forEach(function(it) {
						// it.checked_num = it.num
						let bagp = Number(it.checked_num) * Number(it.back_price)
						let money = 0
						if (it.checked) {
							console.log(it)
							price += bagp
							_this.jindu = ((parseInt(_this.item_ad.jindu) + price) / _this.item_ad.goodmes
								.price * 100).toFixed(2)
						}
					})
					_this.bprice = price
				}, 100)
			},
			// 加
			numjia(e) {
				let _this = this
				if (this.baglist[e].checked_num < this.baglist[e].num) {
					this.baglist[e].checked_num++

					var price = 0
					this.baglist.forEach(function(it) {
						// it.checked_num = it.num
						let bagp = Number(it.checked_num) * Number(it.back_price)
						let money = 0
						if (it.checked) {
							// console.log()
							price += bagp
							_this.jindu = ((parseInt(_this.item_ad.jindu) + price) / _this.item_ad.goodmes
								.price * 100).toFixed(2)
						}

					})
					if (price == 0) {
						_this.jindu = (parseInt(_this.item_ad.jindu) / _this.item_ad.goodmes
							.price * 100).toFixed(2)
					}
					_this.bprice = price
				}
			},
			//
			is_check(e) {
				let _this = this
				this.baglist[e].checked = !this.baglist[e].checked
				var price = 0
				setTimeout(() => {
					this.baglist.forEach(function(it) {
						if (it.checked == false) {
							it.checked_num = it.num
						}
						let bagp = Number(it.checked_num) * Number(it.back_price)
						let money = 0
						if (it.checked) {
							// console.log()
							price += bagp
							_this.jindu = ((parseInt(_this.item_ad.jindu) + price) / _this.item_ad.goodmes
								.price * 100).toFixed(2)
						}

					})
					if (price == 0) {
						_this.jindu = (parseInt(_this.item_ad.jindu) / _this.item_ad.goodmes
							.price * 100).toFixed(2)
					}
					_this.bprice = price
				}, 100)
			},
			toPage(folder, name, id = -1) {
				if (id == -1) {
					uni.navigateTo({
						url: `/pages/${folder}/${name}`
					});
				} else {
					uni.navigateTo({
						url: `/pages/${folder}/${name}?id=${id}`
					});
				}
			},
			// 标签列表
			async classify(e) {
				let item = await this.$api.post('shop/classify', {
					token: uni.getStorageSync('token')
				})
				if (e == 0) { // 第一次进页面调用 
					this.classifyid = item.data.ids[0]
					this.exchangelist(e)
				}
				this.classifylist = item.data
			},
			// 进阶列表
			async exchangelist(e, i) {
				let _this = this
				let item = await this.$api.post('Exchange/exchangelist', {
					token: uni.getStorageSync('token'),
					page: 1,
					limit: 9999,
					category_id: _this.classifyid
				})
				if (e == -1) {
					this.exchangeslist = item.data.list
					return
				}
				this.exchangeslist = item.data.list
				if (e == 0) { // 第一次进页面调用
					_this.item_ad = item.data.list[0]
				} else {
					_this.item_ad = item.data.list[i]
				}
				console.log(_this.item_ad)
				this.jindu = Number(this.item_ad.jindu / this.item_ad.goodmes.price * 100).toFixed(2)
				this.duihuanjindu = Number(this.item_ad.jindu / this.item_ad.goodmes.price * 100).toFixed(2)
			},
			// 标签列表
			async userBag() {
				let _this = this
				let item = await this.$api.post('Usersys/userBag', {
					token: uni.getStorageSync('token'),
					page: _this.page,
					tab: 0,
					rare: '',
					lock: 0,
					limit: 999,
					dui: 1,
					is_exchange: 1
				})
				item.data.list.forEach(function(it, idx) {
					it.checked = false
					it.checked_num = it.num
				})
				this.baglist = item.data.list
			},
		},
		onLoad(options) {

		}
	}
</script>

<style lang="less" scoped>
	.quanx {
		position: fixed;
		right: 10rpx;
		top: 50%;
	}

	.rate {
		width: 100%;
		height: 25rpx;
		background-color: #eee;
		border: 4rpx solid #fff;
		border-radius: 20rpx;
		display: flex;
		overflow: hidden;

		.rate_one {
			background-color: #08dab7;
			height: 100%;
			transition: .5s;
			flex-shrink: 0
		}

		.rate_two {
			height: 100%;
			background-color: #5E9D63;
			transition: .5s;
			max-width: 100%;
		}
	}

	.showbtn {
		margin: 20rpx auto 10rpx;
		background-color: #F19149;
	}

	.list_top {
		.top_item {
			display: inline-block;
			line-height: 50rpx;
			transition: .3s;
			font-size: 25rpx;
		}

		.open {
			color: #fff;
			background-color: #FA9962;
		}

		.no_open {
			color: #333;
		}
	}

	.list_bot {
		background-color: #eeeeee;

		.bot_item {
			float: left;
			width: 32%;
			margin-right: 2%;
			margin-bottom: 20rpx;
			background-color: #fff;

		}

		.bot_item:nth-child(3n) {
			margin-right: 0;
		}
	}

	.btn {
		position: fixed;
		bottom: 20rpx;
		z-index: 999;
	}

	.box_item {
		width: 95%;
		overflow: hidden;
		margin: 0 auto;
		padding-bottom: 150rpx;

		.item {
			margin-right: 15rpx;
		}

		.item:nth-child(4n) {
			margin-right: 0;
		}
	}

	.top-item {
		width: 95%;
		margin: 0 auto;
		border: 4rpx solid #fff;
	}

	.zinde {
		position: relative;
		z-index: 10;

		.title {
			position: absolute;
			width: 100%;
			text-align: center;
			top: 115rpx;
			color: #fff;
			font-size: 40rpx;
			font-weight: bold;
			text-shadow: 6rpx 6rpx 6rpx #3b3b3b;
		}
	}
</style>